<template>
  <div class="shopDecoration">
    <div class="coms-lib-wrap">
      <div class="coms-lib" :class="openBaseTab ? '' : 'coms-lib-active'">
        <div class="coms-lib-tab" @click="openBaseTab = !openBaseTab">
          <i class="el-icon-caret-bottom arrow"></i>
          <span class="coms-lib-tab-name">基础组件</span>
        </div>
        <div class="com-list">
          <draggable
            :clone="handleAddFormItem"
            :group="{ name: 'form', pull: 'clone', put: false }"
            :list="allComs"
            :sort="false"
            handle=".handleItem"
          >
            <div
              class="com-item"
              :class="item.curCount < item.allCount ? 'handleItem' : ''"
              v-for="item in allComs"
              :key="item.type"
            >
              <i
                class="com-item__icon"
                :style="{ backgroundImage: `url(${item.icon})` }"
              ></i>
              <div class="com-item__name">{{ item.name }}</div>
              <div class="com-item__num">
                {{ item.curCount }}/{{ item.allCount }}
              </div>
            </div>
          </draggable>
        </div>
      </div>
    </div>
    <div class="preview-wrap" v-if="show">
      <div class="preview" :style="{ backgroundColor: config.color }">
        <div class="preview-head" @click="clickConfig">
          <div class="preview-header-title">
            {{ config.title }}
          </div>
        </div>
        <div class="preview-iframe-wrap">
          <draggable
            :animation="200"
            :disabled="false"
            :list="formDesc"
            @add="handleAdd"
            @end="handleMoveEnd"
            @start="handleMoveStart"
            group="form"
            tag="ul"
            style="min-height:100%;"
          >
            <template v-for="(formItem, index) of formDesc">
              <li
                class="list-group-item"
                :key="index"
                :class="curEditIndex === index ? 'active' : ''"
                @click="handleItemClick(index)"
              >
                <component :is="formItem.type" v-model="formDesc[index]" :defaultColor="defaultColor" />
                <!-- 标题 -->
                <div class="widget-name">
                  <span class="widget-name__arrow-out"></span>
                  {{ formItem.name }}
                </div>
                <!-- 删除按钮 -->
                <div class="deleteBtn" @click.stop="handleDelete(index)">
                  <i class="el-icon-delete"></i>
                </div>
              </li>
            </template>
          </draggable>
        </div>
        <div class="preview-footer">
          <div class="copyright">东走西走技术支持</div>
        </div>
        <div class="preview-height-tag">
          <span class="preview-height-tag-text">iPhone 8手机高度</span>
        </div>
      </div>
      <div class="preview-page">
        <div
          class="preview-page-options"
          @click="clickConfig"
          :class="showConfig ? 'preview-page-options-active' : ''"
        >
          <i class="el-icon-tickets"></i>
          页面设置
        </div>
        <div
          class="preview-page-coms"
          @click="clickCom"
          :class="showCom ? 'preview-page-options-active' : ''"
        >
          <i class="el-icon-files"></i>
          组件管理
        </div>
      </div>
    </div>
    <div class="decorate-editor-wrap">
      <div class="decorate-component-config-editor">
        <div class="deco-component-title">
          <div class="deco-component-title__header">
            <span class="deco-component-title__name">{{
              showConfig
                ? '页面设置'
                : showCom
                ? '组件管理'
                : formDesc[curEditIndex]
                ? formDesc[curEditIndex].name
                : ''
            }}</span>
            <p
              class="deco-component-title__msg"
              v-if="!showConfig && formDesc[curEditIndex]"
            >
              <span v-if="formDesc[curEditIndex].type === 'imageTextNav'"
                >小程序 v2.3.1 及以上版本支持</span
              >
            </p>
          </div>
        </div>
        <div class="deco-control-group">
          <config v-if="showConfig" ref="config" v-model="config" :defaultColor="defaultColor" />
          <manage-com v-else-if="showCom" v-model="formDesc"></manage-com>
          <div v-else>
            <template v-for="(formItem, index) of formDesc">
              <component
                :key="index"
                v-if="curEditIndex === index"
                :is="formDesc[curEditIndex].type + 'Set'"
                :ref="'setting' + index"
                v-model="formDesc[curEditIndex]"
              />
            </template>
          </div>
        </div>
      </div>
    </div>
    <!-- 操作模块 -->
    <div class="handle-wrap">
      <el-button type="primary" @click="saveData">保存</el-button>
      <el-button @click="preview">预览</el-button>
    </div>
    <!-- 预览弹窗 -->
    <!-- <Preview
      :previewVisible="previewVisible"
      @closeDialog="previewVisible = false"
      :URL="previewURL"
    /> -->
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import titleText from './components/titleText'
import goods from './components/goods'
import imageAd from './components/imageAd'
import imageTextNav from './components/imageTextNav'
import search from './components/search'
import white from './components/white'
import richText from './components/richText'
import notice from './components/notice'
import videoo from './components/videoo'
import cubeV3 from './components/cubeV3'
import shopBannerWeapp from './components/shopBannerWeapp'
import goodsSet from './components/goodsSet'
import imageAdSet from './components/imageAdSet'
import imageTextNavSet from './components/imageTextNavSet'
import searchSet from './components/searchSet'
import whiteSet from './components/whiteSet'
import richTextSet from './components/richTextSet'
import noticeSet from './components/noticeSet'
import videooSet from './components/videooSet'
import cubeV3Set from './components/cubeV3Set'
import shopBannerWeappSet from './components/shopBannerWeappSet'
import titleTextSet from './components/titleTextSet'
import config from './components/config'
import manageCom from './components/manageCom'
// import Preview from './components/preview'

import c_text from './assets/img/c_text.png'
import c_store from './assets/img/c_store.png'
import c_photo from './assets/img/c_photo.png'
import c_nav from './assets/img/c_nav.png'
import c_shop from './assets/img/c_shop.png'
import c_search from './assets/img/c_search.png'
import c_split from './assets/img/c_split.png'
import c_richtxt from './assets/img/c_richtxt.png'
import c_talk from './assets/img/c_talk.png'
import c_video from './assets/img/c_video.png'
import c_box from './assets/img/c_box.png'


export default {
  name:'Dragui',
  components: {
    config,
    draggable,
    titleText,
    goods,
    imageAd,
    imageTextNav,
    search,
    white,
    richText,
    notice,
    videoo,
    cubeV3,
    shopBannerWeapp,
    titleTextSet,
    goodsSet,
    imageAdSet,
    imageTextNavSet,
    searchSet,
    whiteSet,
    richTextSet,
    noticeSet,
    videooSet,
    cubeV3Set,
    shopBannerWeappSet,
    manageCom,
    // Preview
  },
  data() {
    return {
      defaultColor: [
    '#f9f9f9',
    '#1890ff',
    '#304156',
    '#212121',
    '#11a983',
    '#13c2c2',
    '#6959CD',
    '#f5222d'
    ],
      previewURL: '',
      componentss: [],
      previewVisible: false,
      config: {
        background: '',
        category: [],
        color: '#f9f9f9',
        description: '',
        disableEdit: false,
        height: '',
        is_global_setting: '1',
        title: '店铺主页',
        type: 'config',
        width: ''
      },
      show: false,
      showConfig: true,
      curEditIndex: -1,
      formDesc: [],
      openBaseTab: true,
      allComs: [
        {
          type: 'titleText',
          name: '标题文本',
          icon: c_text,
          allCount: 20,
          curCount: 0
        },
        {
          type: 'goods',
          name: '商品',
          icon: c_store,
          allCount: 30,
          curCount: 0
        },
        {
          type: 'imageAd',
          name: '图片广告',
          icon: c_photo,
          allCount: 50,
          curCount: 0
        },
        {
          type: 'imageTextNav',
          name: '图文导航',
          icon: c_nav,
          allCount: 10,
          curCount: 0
        },
        {
          type: 'shopBannerWeapp',
          name: '店铺信息',
          icon: c_shop,
          allCount: 2,
          curCount: 0
        },
        {
          type: 'search',
          name: '商品搜索',
          icon: c_search,
          allCount: 2,
          curCount: 0
        },
        {
          type: 'white',
          name: '辅助分割',
          icon: c_split,
          allCount: 30,
          curCount: 0
        },
        {
          type: 'richText',
          name: '富文本',
          icon: c_richtxt,
          allCount: 12,
          curCount: 0
        },
        {
          type: 'notice',
          name: '公告',
          icon: c_talk,
          allCount: 12,
          curCount: 0
        },
        {
          type: 'videoo',
          name: '视频',
          icon: c_video,
          allCount: 12,
          curCount: 0
        },
        {
          type: 'cubeV3',
          name: '魔方',
          icon: c_box,
          allCount: 12,
          curCount: 0
        }
      ],
      coms: {
        // 标题文本
        titleText: {
          align: 0, // 1居中 0靠左
          bg_color: '#fff',
          desc: '',
          desc_color: '#969799',
          desc_size: '12',
          desc_weight: 'normal',
          show_link: false,
          link_type: 0,
          link: '',
          link_text: '查看更多',
          show_divider: false,
          template_type: '0',
          title: '',
          title_color: '#323233',
          title_size: 16,
          title_weight: 'normal',
          wx_author: '',
          wx_date: '',
          wx_link: {},
          wx_link_title: '',
          wx_link_type: '0',
          type: 'titleText',
          name: '标题文本'
        },
        // 商品
        goods: {
          border_radius_type: '1',
          button_text: '',
          buy_btn: '1',
          buy_btn_express: '0',
          buy_btn_type: '1',
          corner_mark_image: '',
          corner_mark_type: '0',
          default_image_url: '',
          goods: [],
          goods_list: [],
          goods_nav_type: 'top', // 商品分组菜单展示
          goods_nav_all: false, // 是否展示全部分组
          goods_nav_mode: 1, // 菜单样式
          goods_nav_pos: 0, // 菜单位置
          goods_show_type: 'goods', // goods 商品 goodsGroup 商品分组
          goods_from: 0, // 0 商品 1 选择分组
          goods_margin: 10,
          goods_list_style: 0,
          goods_border_style: 0,
          image_fill_style: 0,
          image_scale: 0,
          display_scale: 0,
          page_margin: 15,
          show_corner_mark: true,
          show_origin_price: true,
          show_sub_title: true,
          show_title: true,
          show_buy_btn: true,
          show_ump_ambience: '0',
          size: '0',
          size_type: '0',
          text_align_type: 'left',
          text_style_type: '1',
          text_weight: 'normal',
          type: 'goods',
          name: '商品'
        },
        // 图片广告
        imageAd: {
          corner_type: '0',
          count: 6,
          image_fill_style: '0',
          image_style: 0,
          show_method: 0,
          page_margin: 0,
          img_margin: 0,
          display_scale: 0,
          indicator: '0',
          size: '0',
          sub_entry: [
            {
              alias: '',
              image_height: 100,
              image_id: '1228',
              image_thumb_url:
                'https://su.yzcdn.cn/public_files/2019/03/05/2b60ed750a93a1bd6e17fc354c86fa78.png',
              image_url:
                'https://su.yzcdn.cn/public_files/2019/03/05/2b60ed750a93a1bd6e17fc354c86fa78.png',
              image_width: 100,
              link_id: '',
              link_title: '',
              link_type: '',
              link_url: '',
              title: '1213',
              type: 'image_ad_selection'
            },
            {
              alias: '',
              image_height: 100,
              image_id: '1228',
              image_thumb_url:
                'https://img.yzcdn.cn/public_files/2019/09/10/179bbc6e77d7cd4f4b774f868b1b3c26.png',
              image_url:
                'https://img.yzcdn.cn/public_files/2019/09/10/179bbc6e77d7cd4f4b774f868b1b3c26.png',
              image_width: 100,
              link_id: '',
              link_title: '',
              link_type: '',
              link_url: '',
              title: '1213',
              type: 'image_ad_selection'
            },
            {
              alias: '',
              image_height: 100,
              image_id: '1228',
              image_thumb_url:
                'https://su.yzcdn.cn/public_files/2019/03/05/2b60ed750a93a1bd6e17fc354c86fa78.png',
              image_url:
                'https://su.yzcdn.cn/public_files/2019/03/05/2b60ed750a93a1bd6e17fc354c86fa78.png',
              image_width: 100,
              link_id: '',
              link_title: '',
              link_type: '',
              link_url: '',
              title: '1213',
              type: 'image_ad_selection'
            }
          ],
          type: 'imageAd',
          name: '图片广告'
        },
        // 图文导航
        imageTextNav: {
          background_color: '#fff',
          border_width: 0,
          color: '#000',
          count: 4,
          image_fill_style: '0',
          show_method: 0,
          slide_setting: '0',
          sub_entry: [
            {
              image_height: 100,
              image_id: '1228',
              image_thumb_url:
                'https://b.yzcdn.cn/public_files/2019/03/05/bd8a4dea63577aa7d5297c30dcd0d0bf.png',
              image_url:
                'https://b.yzcdn.cn/public_files/2019/03/05/bd8a4dea63577aa7d5297c30dcd0d0bf.png',
              image_width: 100,
              title: '导航一',
              type: 'image_ad_selection',
              link: ''
            },
            {
              image_height: 100,
              image_id: '1227',
              image_thumb_url:
                'https://b.yzcdn.cn/public_files/2019/03/05/bd8a4dea63577aa7d5297c30dcd0d0bf.png',
              image_url:
                'https://b.yzcdn.cn/public_files/2019/03/05/bd8a4dea63577aa7d5297c30dcd0d0bf.png',
              image_width: 100,
              title: '导航二',
              type: 'image_ad_selection',
              link: ''
            },
            {
              image_height: 100,
              image_id: '1225',
              image_thumb_url:
                'https://b.yzcdn.cn/public_files/2019/03/05/bd8a4dea63577aa7d5297c30dcd0d0bf.png',
              image_url:
                'https://b.yzcdn.cn/public_files/2019/03/05/bd8a4dea63577aa7d5297c30dcd0d0bf.png',
              image_width: 100,
              title: '导航三',
              type: 'image_ad_selection',
              link: ''
            },
            {
              image_height: 100,
              image_id: '1226',
              image_thumb_url:
                'https://b.yzcdn.cn/public_files/2019/03/05/bd8a4dea63577aa7d5297c30dcd0d0bf.png',
              image_url:
                'https://b.yzcdn.cn/public_files/2019/03/05/bd8a4dea63577aa7d5297c30dcd0d0bf.png',
              image_width: 100,
              title: '导航四',
              type: 'image_ad_selection',
              link: ''
            }
          ],
          type: 'imageTextNav',
          name: '图文导航'
        },
        // 店铺信息
        shopBannerWeapp: {
          background_image:
            'https://img.yzcdn.cn/public_files/2017/07/11/f2a0a05d5a801cb51ecbc0710e6947fb.png',
          store_info_style: 0,
          type: 'shopBannerWeapp',
          name: '店铺信息'
        },
        // 商品搜索
        search: {
          border_style_color: '#fff',
          border_style_height: 40,
          border_style_method: 0,
          color: '#f9f9f9',
          hot_search_keys: [{ val: 'cxk' }],
          hot_search_keys_new: [],
          position_show_method: '0',
          position_type: '0',
          show_search_component: '1',
          text_align_method: 0,
          text_color: '#969799',
          type: 'search',
          name: '商品搜索'
        },
        // 辅助分割
        white: {
          color: '#e5e5e5',
          hasPadding: 0,
          height: 36,
          lineType: 'solid',
          frameType: 0,
          type: 'white',
          name: '辅助分割'
        },
        // 富文本
        richText: {
          color: '#f9f9f9',
          content: '',
          fullscreen: 0,
          type: 'richText',
          name: '富文本'
        },
        // 公告
        notice: {
          bg_color: '#fff8e9',
          color: '#646566',
          content: '',
          type: 'notice',
          name: '公告'
        },
        // 视频
        videoo: {
          customUrl: 'https://www.w3school.com.cn/i/movie.mp4',
          sourceFrom: 2,
          surfacePlot: 1,
          surfacePlotImage:'',
          type: 'videoo',
          name: '视频'
        },
        // 魔方
        cubeV3: {
          // height: 4,
          layout_height: 2,
          layout_width: 2,
          border_width: 15,
          page_margin: 16,
          show_method: 1,
          sub_entry: [
            {
              image_url: '',
              link_id: '',
              link_title: '',
              link_url: '',
              title: '',
              width: 2, //框内提示宽
              height: 2, ////框内提示高
              x: 0,
              y: 0
            },
            {
              image_url: '',
              link_id: '',
              link_title: '',
              link_url: '',
              title: '',
              width: 2, //框内提示宽
              height: 2, ////框内提示高
              x: 1,
              y: 0
            }
          ],
          type: 'cubeV3',
          name: '魔方'
        }
      },
      useComs: [],
      showCom: false
    }
  },
  computed: {
    dragOptions() {
      return {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      }
    }
  },
  watch: {
    formDesc(newVal) {
      this.allComs.map(item => {
        item.curCount = 0
      })
      newVal.map(item => {
        for (const curItem of this.allComs) {
          if (item.type === curItem.type) {
            curItem.curCount++
            break
          }
        }
      })
    }
  },
  methods: {
    initData() {
      this.componentss = [this.config, ...this.formDesc]
      return this.componentss.map((item, index) => {
        return {
          sort: index + 1,
          moduleType: item.type,
          settingContent: JSON.stringify(item)
        }
      })
    },
    saveData() {
      // const user = this.$cookies.get('user')
      // const data = {
      //   shopId: user.shopNumber,
      //   mchId: user.companyId,
      //   tplId: this.$route.query.tplId,
      //   modules: this.initData()
      // }
      // this.http({
      //   url: this.api.ShopApi.SaveShopModule,
      //   method: 'post',
      //   data
      // }).then(res => {
      //   if (res.isSucceed) {
      //     this.$message.success('保存成功')
      //   }
      // })
    },
    // 预览
    preview() {
      const data = {
        pageUrl: '/mode',
        tplId: this.$route.query.tplId,
        modules: this.initData()
      }
      // this.http({
      //   url: this.api.ShopApi.GetPreviewShopModuleUrl,
      //   method: 'post',
      //   data
      // }).then(res => {
      //   if (res.isSucceed) {
      //     this.previewURL = res.data
      //   }
      // })
      this.previewVisible = true
    },
    // 获取保存的设置
    getSetting() {
      // const user = this.$cookies.get('user')
      // const data = {
      //   shopId: user.shopNumber,
      //   mchId: user.companyId,
      //   tplId: this.$route.query.tplId
      // }
      // this.http({
      //   url: this.api.ShopApi.QueryShopModules,
      //   method: 'post',
      //   data
      // }).then(res => {
      //   if (res.isSucceed) {
      //     this.config = JSON.parse(res.data.shift().settingContent)
      //     this.formDesc = res.data.map(item => {
      //       return JSON.parse(item.settingContent)
      //     })
      //   }
      // })
    },
    clickCom() {
      if (this.showConfig) this.showConfig = false
      if (!this.showCom) this.showCom = true
      this.curEditIndex = -1
    },
    clickConfig() {
      if (!this.showConfig) this.showConfig = true
      if (this.showCom) this.showCom = false
      this.curEditIndex = -1
    },
    // 拖拽后新增表单项
    handleAddFormItem(item) {
      console.log('拖拽')
      return JSON.parse(JSON.stringify(this.coms[item.type]))
    },
    // 通过index更新
    updateSelectIndex(index) {
      this.$nextTick(() => {
        if (this.showConfig) this.showConfig = false
        if (this.showCom) this.showCom = false
        this.curEditIndex = index
      })
    },
    // 删除
    handleDelete(index) {
      console.log('删除')
      this.formDesc.splice(index, 1)

      if (this.formDesc.length) {
        // 因为如果删除最后一个, 界面则无选中效果 所以这里删除最后一个后, 重新选择最后一个
        if (index >= this.formDesc.length) {
          this.updateSelectIndex(this.formDesc.length - 1)
        } else {
          this.updateSelectIndex(index)
        }
      } else {
        this.showConfig = true
        this.curEditIndex = -1
      }
    },
    // 新增
    handleAdd(res) {
      console.log('新增')
      // this.updateSelectIndex(res.newIndex)
      // this.$store.commit(
      //   'updateCompCount',
      //   this.currentFormItemList[res.newIndex].type
      // )
    },
    // 移动开始
    handleMoveStart(res) {
      console.log('移动开始')
      this.updateSelectIndex(res.oldIndex)
    },
    // 移动结束
    handleMoveEnd(res) {
      console.log('移动结束')
      this.updateSelectIndex(res.newIndex)
    },
    // 点击选中
    handleItemClick(index) {
      console.log('点击选中')
      this.updateSelectIndex(index)
    },
    // 点击编辑组件
    edit(obj) {
      this.curEdit = obj
    }
  },
  created() {
    this.getSetting()
  },
  mounted() {
    this.$nextTick(() => {
      this.show = true
    })
  }
}
</script>

<style lang="less">
@import './index.less';
</style>
